import './StarScore.scss';

import React from 'react';

/**
 * StarScore组件
 * @description <StarScore score={num}/>
 */

class StarScore extends React.Component {
  /**
   * 渲染5颗星得分方法
   *  @param {*} data
   */
  renderScore() {
    const wm_poi_score = this.props.score || '';

    const score = wm_poi_score.toString();

    const scoreArray = score.split('.');

    // 满星个数
    const fullStar = parseInt(scoreArray[0], 10);

    // 半星个数
    const halfStar = parseInt(scoreArray[1], 10) >= 5 ? 1 : 0;

    // 0星个数
    const nullStar = 5 - fullStar - halfStar;

    const starJsx = [];


    // 渲染满星jsx
    for (let i = 0; i < fullStar; i++) {
      starJsx.push(<div key={`${i}full`} className="star fullstar" />);
    }

    // 渲染满星jsx
    if (halfStar) {
      for (let j = 0; j < halfStar; j++) {
        starJsx.push(<div key={`${j}half`} className="star halfstar" />);
      }
    }

    // 渲染0星jsx
    if (nullStar) {
      for (let k = 0; k < nullStar; k++) {
        starJsx.push(<div key={`${k}null`} className="star nullstar" />);
      }
    }

    return starJsx;
  }

  render() {
    return <div className="star-score">{this.renderScore()}</div>;
  }
}

export default StarScore;
